<template>
  <pages>
    <pages-header slot="header" :back="false">
      abc
    </pages-header>
    <div style="width: 100%;height: 100%;overflow: hidden;">
      <div class="hello" style="width: 50%;height: 50%; background: #F00;" v-drag.scrollLock="drag" v-tap="tap" :style="{
        transform: transform
      }">
      </div>
    </div>
  </pages>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      x: 0,
      y: 0
    }
  },
  computed: {
    transform() {
      return `translate(${this.x}px,${this.y}px)`
    }
  },
  methods: {
    drag(e) {
      const position = {x: e.x, y: e.y}

      if(e.x < 0)
        position.x = 0
      if(e.y < 0)
        position.y = 0

      this.x = position.x
      this.y = position.y

      return position
    },
    tap(e) {
      this.$router.push('/bbc')
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
